<template>
	<view class="home">
		<!-- 首页线上预约区域 -->
		<view class="home-reservation">
			<view class="reservation-title">线上预约</view>
			<!-- 日期选择区域 -->
			<u-scroll-list :indicator="false">
				<view v-for="(item, index) in weekList" :key="index">
					<view class="date-box" :class="dataIndex === index ? 'active' : ''" @click="chooseWeek(index)">
						<text>{{item.dateTime}}</text>
						<text>{{item.weekName}}</text>
					</view>
				</view>
			</u-scroll-list>
			<!-- 列表区域 -->

			<view class="reservation-list">

				<view v-show="doctorList.length==0&&flag==false">
					<u-empty mode="data" icon="http://cdn.uviewui.com/uview/empty/data.png" text="暂无医生排班">
					</u-empty>
				</view>

				<view v-show="doctorList.length==0&&flag==true">
					<u-empty mode="permission" icon="http://cdn.uviewui.com/uview/empty/permission.png" text="已过期">
					</u-empty>
				</view>

				<view v-show="doctorList.length>0&&flag==true">
					<u-empty mode="permission" icon="http://cdn.uviewui.com/uview/empty/permission.png" text="已过期">
					</u-empty>
				</view>

				<view class="list-box" v-for="item in doctorList" :key="item.id"
					v-show="doctorList.length>0&&flag==false">
					<u-avatar size="50" src="../static/image/doctor.jpg" @click="toDetail(item.id)"></u-avatar>
					<view class="list-count" @click="toDetail(item.id)">
						<text class="title">
							<text style="font-weight: bold;color: #000;">
								{{item.realName}}
							</text>
							<text class="title" style="margin-left: 15rpx;">
								{{item.occupationTitle}}
							</text>
						</text>
						<text class="title" style="color: #000;">{{item.hospital}} | {{item.administrativeOffice}}</text>
						<u--text :lines="2" size="22rpx" :text="'擅长:'+item.personalExpertise"></u--text>
					</view>
					<view class="list-btn">
						<text class="money">¥{{item.consultExpense==0.00?'免费':item.consultExpense}}</text>
						<u-button type="success" size="mini" shape="circle" color="#54b6ab"
							@click="toNav(item)">立即预约</u-button>
					</view>
				</view>
			</view>
		</view>

		<u-popup :show="show" @close="close" mode="center" bgColor="transparent">
			<view class="dialog-box">
				<view class="dialog-header">
					<text style="font-size: 26rpx;font-weight: bold;color: #333;">订单确认</text>
					<u-icon name="close" @click="show = false"></u-icon>
				</view>
				<view class="dialog-body">
					<view>
						咨询医师：{{obj.realName}}
					</view>
					<view style="margin-top: 20rpx;">
						咨询费用：{{obj.consultExpense}}元
					</view>
				</view>

				<view class="dialog-footer">
					<view class="footer-btn" style="border-right: 2rpx solid #ccc;">
						<u-button type="default" text="取消" @click="show = false"></u-button>
					</view>
					<view class="footer-btn">
						<u-button type="default" text="确定" @click="submit"></u-button>
					</view>
				</view>
			</view>
		</u-popup>

	</view>
</template>

<script>
	export default {
		data() {
			return {
				show: false,
				dataIndex: 0,
				doctorList: [], //医生列表
				weekList: [],
				obj: {},
				flag: null,
				form: {
					clientId: null,
					doctorId: null,
					morbidityCondition: 0, //发病情况 0初诊 1复诊
					timesNum: null, //复诊次数 初诊不填 复诊必填
					morbidityTime: null, //发病时间 初诊必填 复诊非必填
					feverDayNum: null, //发热天数
					highTemperature: null, //发热最高温度
					feverSymptom: 0, //发热症状 0无 1有
					symptomDetailArr: [], //发热症状详情
					feverTimeInterval: 0, //发热时间间隔 0持续发热 1间隔
					intervalTimeHour: null, //间隔小时
					feverMedicateStatus: 0, //发热用药 0无 1有
					medicateDetail: null, //用药详情
					heelExampleUrlArr: [], //足跟示例资源地址
					heelExampleType: null, //足跟示例资源类型 0图片 1视频
					heelColor: null, //足跟颜色
					heelTemperature: null, //足跟温度 1温 2凉 3热
					heelPressRedTime: null, //足跟按压变红 0 <=3秒  1>3秒
					heelHardness: null, //足心软硬度 1软(唇) 2韧(鼻) 3硬(额)
					coughDayNum: null, //咳嗽天数
					aggravateDayNum: null, //加重天数
					coughTimesArr: [], //咳嗽时间
					coughRelatedFactor: 0, //咳嗽相关因素0无 1有
					coughFactorDetailArr: [], //咳嗽相关因素详情
					coughVomitStatus: 0, //咳嗽呕吐 0无 1有
					coughAwakeningStatus: 0, //夜里咳醒 0无 1有
					feverCoughStatus: 0, //发热咳嗽 0无 1有
					coughPeculiarityArr: [], //咳嗽特点
					coughRecordedUrl: null, //咳嗽录音 可上床多条 用,隔开
					coughRecordedUrlArr: [], //咳嗽录音数组
					gaspStatus: 0, //喘息 0无 1有
					gaspDayNum: null, //喘息天数
					sneezeStatus: 0, //喷嚏 0无 1有
					sneezeDayNum: null, //喷嚏天数
					nasalObstructionStatus: 0, //鼻塞 0无 1有
					nasalObstructionDayNum: null, //鼻塞天数
					anginaStatus: 0, //咽痛 0无 1有
					anginaDayNum: null, //咽痛天数
					dullStatus: 0, //暗哑 0无 1有
					dullDegree: 1, //暗哑程度 1轻 2中 3重
					gaspBreathVideoUrlArr: [], //喘息或呼吸困难视频示例地址
					electronicStethoscopeUrlArr: [], //电子听诊器呼吸音地址
					kneadNoseEye: 0, //手揉鼻子眼睛 0无 1有
					eczemaStatus: 0, //幼时湿疹 0无 1有
					eczemaDegree: 1, //湿疹程度 1轻 2中 3重
					allergyRhinitis: 0, //过敏性鼻炎 0无 1有
					parentAllergyRhinitis: 0, //父母过敏性鼻炎 0无 1有
					allergySource: 0, //过敏原 0无 1有
					allergySourceDetail: null, //过敏原详情
					penicillinCephalosporinAllergy: 0, //青霉素/头孢过敏史 0无 1有
					otherAllergyMedicineDetail: null, //其他过敏药物
					foodAllergyMedicineDetail: null, //食物过敏详情
					recentRash: 0, //近两天皮疹 0无 1有
					lowerPartRash: 0, //下面部位皮疹 0无 1有
					lowerPartRashDetailArr: [], //下面部位皮疹详情
					rashShowType: null, //皮疹展示 0图片 1视频
					rashShowUrlArr: [], //皮疹展示资源地址
					otherExpression: 0, //有无下列表现 0无 1有
					otherExpressionDetailArr: [], //有下列表现详情
					otherIllness: 1, //其他疾病
					otherIllnessDetail: null, //其他疾病详情
					temperatureCheckArr: [],
					electronicTemperatureUrlArr: [],
					physicalAssayImageArr: [], //血常规详情
					physicalUrineReportArr: [], //尿常规详情
					chestRadiograph: 0, //是否有胸片
					chestRadiographArr: [], //胸片详情
					lungCt: 0, //是否有肺部CT
					lungCtArr: [], //肺部CT详情
					carbonMonoxideArr: [], //一氧化碳检测详情
					lungFeature: 0, //是否有肺功能
					lungFeatureArr: [], //肺功能检测详情
					bronchus: 0, //是否有支气管检查
					bronchusArr: [], //支气管检查详情
					illDayNum: null,
					takeOrallyArr: [],
					intravenousDripArr: [],
					atomizationArr: [],
					otherMedicalHistoryArr: [] //图片和pdf都支持
				},
			}
		},
		onShow() {
			this.findCurrentWeekDoctorList()
		},
		methods: {
			async submit() {
				let form = JSON.parse(uni.getStorageSync('submitInfo'))
				form.doctorId = this.obj.id
				const {
					data
				} = await uni.$http.post('/patient-interrogationRecords/submitMedical', form)
				if (data.code === 200) {
					this.show = false
					uni.removeStorageSync('doctorId')
					uni.removeStorageSync('submitInfo')
					// this.$store.commit('setInterrogationInfo', this.form)
					uni.showToast({
						icon: 'none',
						title: data.message
					})
					setTimeout(() => {
						uni.navigateTo({
							url: '/pages/consultation'
						})
					}, 700)
				}

			},
			toNav(obj) {
				this.obj = obj
				this.show = true
			},
			//切换星期
			chooseWeek(index) {
				this.dataIndex = index
				this.doctorList = this.weekList[this.dataIndex].doctorList
				this.flag = this.weekList[this.dataIndex].flag
			},
			//查询当前星期医生排班
			async findCurrentWeekDoctorList() {
				const {
					data
				} = await uni.$http.post('/patient-doctor/findCurrentWeekDoctorList')
				if (data.code === 200) {
					this.weekList = data.data
					this.doctorList = this.weekList[this.dataIndex].doctorList
					this.flag = this.weekList[this.dataIndex].flag
				}
			},
			close() {
				this.show = false
				// console.log('close');
			}

		}
	}
</script>

<style lang="scss" scoped>
	.home {
		width: 100%;
		height: 100%;
		background-color: #f2f2f2;
		overflow: auto;

		.dialog-box {
			width: 80vw;
			background-color: #fff;
			border-radius: 20rpx;

			.dialog-header {
				width: 100%;
				display: flex;
				align-items: center;
				justify-content: space-between;
				padding: 20rpx 30rpx;
				box-sizing: border-box;
				border-bottom: 2rpx solid #ccc;
			}

			.dialog-body {
				width: 100%;
				padding: 50rpx 30rpx;
				box-sizing: border-box;
				border-bottom: 2rpx solid #ccc;
				font-size: 22rpx;
				display: flex;
				flex-direction: column;
				align-items: center;
				justify-content: space-around;
			}

			.dialog-footer {
				width: 100%;
				display: flex;
				align-items: center;
				justify-content: space-between;

				.footer-btn {
					width: 50%;
				}
			}
		}

		.home-reservation {
			margin: 20rpx auto;
			width: 95%;
			background-color: #fff;
			border-radius: 20rpx;
			padding: 20rpx;
			box-sizing: border-box;

			.reservation-title {
				color: #555;
				font-weight: bold;
				margin-bottom: 20rpx;
			}

			.date-box {
				width: 150rpx;
				height: 80rpx;
				display: flex;
				flex-direction: column;
				align-items: center;
			}

			.active {
				color: #54b6ab;
			}

			.reservation-list {
				width: 100%;

				.list-box {
					width: 100%;
					padding: 20rpx;
					box-sizing: border-box;
					border-bottom: 2rpx solid #999;
					display: flex;
					align-items: stretch;
					justify-content: space-between;

					image {
						width: 100rpx;
						height: 100rpx;
					}

					.list-count {
						width: calc(100% - 300rpx);
						display: flex;
						flex-direction: column;

						.title {
							color: #999;
							margin-bottom: 20rpx;
							box-sizing: border-box;
						}

						.count {
							word-break: break-all;
							text-overflow: ellipsis;
							display: -webkit-box;
							-webkit-box-orient: vertical;
							-webkit-line-clamp: 2;
							overflow: hidden;
						}
					}

					.list-btn {
						width: 140rpx;
						display: flex;
						flex-direction: column;
						align-items: flex-end;
						justify-content: space-around;

						.money {
							color: red;
							font-weight: bold;
						}
					}
				}
			}
		}

	}
</style>